<template>
    <a-row :gutter="10">
      <a-col :md="leftColMd" :sm="24" >
        <div v-show="!isShowDetail" style="text-align: left;margin-left: 20px;  margin-bottom: -30px;z-index: 1;position:relative">
        <a-tooltip placement="top" title="返回首页">
            <a-icon type="arrow-left" @click="openIndexPage" style="width: 30px;font-size: large;" />
        </a-tooltip>
    </div>
        <a-card :bordered="false"  >
          <a-layout class="layout" :class="[device]">
          <template>
            <a-card style="width: 200px;">
            <a-tree
              draggable
                  :selectedKeys="selectedKeys"
                  :checkStrictly="true"
                  @select="onSelect"
                  :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                  :treeData="caseTree"
                  :autoExpandParent="autoExpandParent"
                  :expandedKeys="iExpandedKeys"
                  @expand="onExpand"
                />
          </a-card>
              <!-- <side-menu
              style="top: 0%;"
            mode="inline"
            :menus="menus"
            :theme="navTheme"
            @menuSelect="menuSelect"
            @updateMenuTitle="handleUpdateMenuTitle"
            :collapsed="false"
            :collapsible="true"></side-menu> -->
          </template>
          <template >
              <a-list 
            :grid="{ gutter: 12, lg: 2, md: 2, sm: 1, xs: 1 }"
            :dataSource="cases" style="margin-right: 10px;margin-top: 5px; min-width: 80%;"
          >
            <a-list-item slot="renderItem" slot-scope="item, index">
              <template>
                  <CaseCard :Case="item" @showdetail="openSubMenu" ></CaseCard>
              </template>
            </a-list-item>
          </a-list>
          </template>
         
        </a-layout>
          <!-- <yks-equipment-list ref="equipmentList" @openSubMenu="openSubMenu"/> -->
        </a-card>
      </a-col>
      <a-col :md="rightColMd" :sm="24">
        <div style="text-align: left;margin-left: 20px;  margin-bottom: -30px;z-index: 1;position:relative">
          <a-tooltip placement="top" title="返回案例列表">
              <a-icon type="arrow-left" @click="openMainMenu" style="width: 30px;font-size: large;" />
          </a-tooltip>
      </div>
        <a-card :bordered="false">
          
          
        
          <PublishContent  ref="publistContent" :text="Case.publishContent" ></PublishContent>
          
        </a-card>
      </a-col>
    </a-row>
      
  </template>
  <script>
  import SideMenu from '@/components/menu/SideMenu'
  import { mixin, mixinDevice } from '@/utils/mixin.js'
  import CaseCard from '../../components/yks/CaseCard.vue'
  import { httpAction, getAction } from '@/api/manage'
  import PublishContent from '../../components/yks/PublishContent.vue';
  export default {
      name: 'IndexYkCases',
      components: {
      SideMenu,
      CaseCard,
      PublishContent
  },
      mixins: [mixin, mixinDevice],
      data() {
        return {
          collapsed: false,
          activeMenu:{},
          rightColMd : 0,
          leftColMd : 21,
          text:"明细内容",
          Context:"明细内容",
          Case:{},
          selectedKeys: [],
          caseTree: [],
        autoExpandParent: true,
        iExpandedKeys: [],
        treeData: [],
        checkedKeys: [],
          menus: [{
              id:"31118BD8B90B4171996AB174663BE575",
              children: [
                      {
                          id: "6FD93786E6FC4D93AE514452BADF5EAC",
                          component: "layouts/RouteView",
                          menuType: 1,
                          meta: {
                              componentName: "RouteView",
                              internalorExternal: false,
                              keepAlive: false,
                              title: "工业清洗项目"
                          },
                          name: "idevset",
                          path: "/dashboard/analysis/IndexYkCases/D001",
                          route: "1"
                      },
                      {
                          id: "F501C5C19D634B6BA05AA94D61C90193",
                          component: "layouts/RouteView",
                          menuType: 1,
                          meta: {
                              componentName: "RouteView",
                              internalorExternal: false,
                              keepAlive: false,
                              title: "油液净化项目"
                          },
                          name: "idevset",
                          path: "/dashboard/analysis/IndexYkCases/D002",
                          route: "1"
                      },
                      {
                          id: "F501C5C19D634B6BA05AA94D61C90193",
                          component: "layouts/RouteView",
                          menuType: 1,
                          meta: {
                              componentName: "RouteView",
                              internalorExternal: false,
                              keepAlive: false,
                              title: "集中供液项目"
                          },
                          name: "idevset",
                          path: "/dashboard/analysis/IndexYkCases/D003",
                          route: "1"
                      }
                  ],
              component:"layouts/RouteView",
              menuType:1,
              meta:{
                  componentName:"RouteView",
                  internalorExternal: false,
                  keepAlive: false,
                  title:"自动化项目"
              },
              name:"idevset",
              path:"/idevset",
              route:"1"
          },
          {
              id:"036A1353429947439B2ED9BB9FF03C19",
              children: [
                      {
                          id: "6FD93786E6FC4D93AE514452BADF5EAC",
                          component: "layouts/RouteView",
                          menuType: 1,
                          meta: {
                              componentName: "RouteView",
                              internalorExternal: false,
                              keepAlive: false,
                              title: "废弃处理项目"
                          },
                          name: "idevset",
                          path: "/dashboard/analysis/IndexYkCases/D005",
                          route: "1"
                      },
                      {
                          id: "F501C5C19D634B6BA05AA94D61C90193",
                          component: "layouts/RouteView",
                          menuType: 1,
                          meta: {
                              componentName: "RouteView",
                              internalorExternal: false,
                              keepAlive: false,
                              title: "污水处理项目"
                          },
                          name: "idevset",
                          path: "/dashboard/analysis/IndexYkCases/D004",
                          route: "1"
                      }
                  ],
              component:"layouts/RouteView",
              menuType:1,
              meta:{
                  componentName:"RouteView",
                  internalorExternal: false,
                  keepAlive: false,
                  title:"环保项目"
              },
              name:"idevconfig",
              path:"/idevconfig",
              route:"1"
          }
      ],
          submenus:[],
          cases:[
          //   {
          //     Id:1,
          //     Title:"工业清洗设备",
          //     Detail:"工业清洗设备展示明细内容",
          //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
          //     Url:"http://www.baidu.com",
          //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
          // },
          // {
          //     Id:1,
          //     Title:"工业清洗设备",
          //     Detail:"工业清洗设备展示明细内容",
          //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
          //     Url:"http://www.baidu.com",
          //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
          // },
          // {
          //     Id:1,
          //     Title:"工业清洗设备",
          //     Detail:"工业清洗设备展示明细内容",
          //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
          //     Url:"http://www.baidu.com",
          //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
          // },
          // {
          //     Id:1,
          //     Title:"工业清洗设备",
          //     Detail:"工业清洗设备展示明细内容",
          //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
          //     Url:"http://www.baidu.com",
          //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
          // },
          // {
          //     Id:1,
          //     Title:"工业清洗设备",
          //     Detail:"工业清洗设备展示明细内容",
          //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
          //     Url:"http://www.baidu.com",
          //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
          // }
      ],
      allCases:[],
      url: {
            list: "/mng/yksPublishs/list",
            treeData:"/sys/category/loadTreeRoot",
          },
          equipmentType : '',
          
        isShowDetail:false
        }
      },
      watch: {
      $route:{
        handler: function(nval,oval){
          this.changePage();
        }
      }
    },
      mounted(){
        this.loading = true
        this.loadTree()
        this.loadData(1)
      },
      methods:{
        changePage(){
        if (this.$route.path.indexOf("/dashboard/analysis/IndexYkDevices") != -1) {
         let arr = this.$route.path.split("/")
         console.log(arr[arr.length - 1])
         this.equipmentType = arr[arr.length - 1]
        //  this.isSystemRpt = false
        }
         this.loadData(1)
      },
      loadTree() {
        let param = {
          pcode:'B04',
          async:false
        }
        debugger
        var that = this
        that.treeData = []
        that.caseTree = []
        getAction(this.url.treeData,param).then((res) => {
          debugger
          if (res.success && res.result ) {
            debugger
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData.push(temp)
              that.caseTree.push(temp)
              that.setThisExpandedKeys(temp)
              // console.log(temp.id)
            }
            // debugger
            // let treeList=res.result
            // let root=treeList.filter(p=>p.pid=='0')
            // that.treeData.push(root)
            // that.caseTree.push(root)
            // this.loadTreeChild(root,treeList)
            // that.setThisExpandedKeys(root)
            // this.loading = false
          }
          that.userIdentity = res.message
        })
      },
      loadTreeChild(parent,result){
              parent.children=result.filter(p=>p.pid=parent.id)
              for (let i = 0; i < parent.children.length; i++) {
                if(parent.children[i].hasChild==1){
                  this.loadTreeChild(parent.children[i],result)
                }
            }
      },
      setThisExpandedKeys(node) {
        //只展开一级目录
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)
          //下方代码放开注释则默认展开所有节点
          /**
          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
          */
        }
      },
      onExpand(expandedKeys) {
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onSelect(selectedKeys, e) {
        if (this.selectedKeys[0] !== selectedKeys[0]) {
          this.selectedKeys = [selectedKeys[0]];
        }
        let record = e.node.dataRef;
        debugger
        this.cases=[]
        this.checkedKeys.push(record.key);
        this.cases=this.allCases.filter(p=>p.selectCategory==record.key)
        // for(var i=0;i<this.allCases.length;i++){
        //   if(this.allCases[i].selectCategory==record.id){
        //     this.cases.push(this.allCases[i])
        //   }
        // }
        
        // this.$refs.DeptBaseInfo.open(record);
        // this.$refs.DeptUserInfo.onClearSelected();
        // this.$refs.DeptUserInfo.open(record);
        // this.$refs.DeptRoleInfo.onClearSelected();
        // this.$refs.DeptRoleInfo.open(record);
      },
          menuSelect() {
          if (!this.isDesktop()) {
            this.collapsed = false
          }
        },
        openSubMenu(item){
          
          this.Case=item
           this.rightColMd = 24
           this.leftColMd = 0
           this.isShowDetail=true
        },
        openMainMenu() {
          this.isShowDetail=false
           this.rightColMd = 0
           this.leftColMd = 24
        },
        openIndexPage(){
        this.$emit("showMain")
      },
        handleUpdateMenuTitle(value) {
          if(value.hasOwnProperty('children')){
            
            this.submenus=value.children
            this.collapsed=true
          }
          else{
            
            this.submenus=[]
            this.collapsed=false
          }
          
        },
        loadData(arg) {
          if(!this.url.list){
            this.$message.error("请设置url.list属性!")
            return
          }
          //加载数据 若传入参数1则加载第一页的内容
          if (arg === 1) {
            // this.ipagination.current = 1;
          }
          var params = {}//this.getQueryParams();//查询条件
          if(this.equipmentType!="")
        {
          params.equipmentType = this.equipmentType
        }
          params.publishType = "case";
          this.loading = true;
          getAction(this.url.list, params).then((res) => {
            if (res.success) {
              //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
              this.cases = res.result.records||res.result;
              for(var i=0;i<this.cases.length;i++){
                this.cases[i].coverimageUrl=window._CONFIG['domianURL']+'/'+this.cases[i].coverimageUrl
                this.allCases.push(Object.assign({}, this.cases[i]))
              }
              // if(res.result.total)
              // {
              //   this.ipagination.total = res.result.total;
              // }else{
              //   this.ipagination.total = 0;
              // }
              //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            }else{
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.loading = false
          })
        },
      }
  }
  
  </script>
  
  <style lang="less" scoped>
     
          // height: 300px;
          .layout{
            display: flex;
          flex-direction: row;
              width: 100%;
              // background-color: black;
              margin-bottom: 200px;
              margin-right: 100px;
          }
      
  </style>